<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>vue的样式绑定</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		.activated{
			color: red;
		}
	</style>
	<body>
		<div id="app">
			<div @click="handleDivClick"
				 :class="{activated: isActivated}">HelloWorld</div>
			<div  @click="handleDivClick2"
				  :class="[divKlass]">
				HelloWorld2
			</div>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				isActivated: false,
					divKlass: "",
			},
			methods: {
				handleDivClick: function(){
					this.isActivated = !this.isActivated;
				},
				handleDivClick2: function(){
					this.divKlass = 
						this.divKlass ==="activated"
						?"":"activated"
				}
			}
		})
		
	</script>
</html>